<template>
  <div>
    <search-wrapper></search-wrapper>
    <div class="detailQuery">
      <div class="show-title">
        <p></p>
        <p>列表展示</p>
      </div>
      <a-row class="detailQuery-form">
        <a-col :span="12" :offset="6">
          <a-form :form="form" @submit="handleSubmit">
            <a-form-item
              label="手机号"
              :label-col="{ span: 7 }"
              :wrapper-col="{ span: 11 }"
            >
              <a-input
                placeholder="请按照手机号搜索"
                v-decorator="[
                  'mobile',
                  {
                    rules: [
                      { required: true, message: '请输入手机号' },
                      rule.phone
                    ]
                  }
                ]"
              />
            </a-form-item>
            <a-form-item
              label="查询项目"
              :label-col="{ span: 7 }"
              :wrapper-col="{ span: 11 }"
            >
              <a-select
                v-decorator="['project_id']"
                placeholder="请选择查询项目"
              >
                <a-select-option
                  :value="item.id"
                  v-for="(item, index) in projectList"
                  :key="index"
                >
                  {{ item.project_name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item
              label="起止时间"
              :label-col="{ span: 7 }"
              :wrapper-col="{ span: 11 }"
            >
              <a-range-picker v-decorator="['times']" />
            </a-form-item>
            <a-form-item class="searchBtn">
              <a-button type="primary" html-type="submit">搜索</a-button>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </div>
    <a-modal
      title="根据您选择的筛选条件查询结果为："
      :closable="false"
      v-model="visible"
      @ok="handleOk"
    >
      <div class="resultItem">
        <p>姓名：</p>
        <p>{{ userInfo.username }}</p>
      </div>
      <div class="resultItem">
        <p>账号：</p>
        <p>{{ userInfo.name }}</p>
      </div>
      <div class="resultItem">
        <p>业绩：</p>
        <p>{{ userInfo.total_money }}</p>
      </div>
      <div slot="footer" class="closeBtn">
        <p @click="visible = false">关闭</p>
      </div>
    </a-modal>
  </div>
</template>

<script>
import validate from "@/tool/validateFunction";
export default {
  name: "index",
  components: {
    searchWrapper: () => import("@/components/searchWrapper/index")
  },
  data() {
    return {
      form: this.$form.createForm(this),
      visible: false,
      rule: {
        phone: { validator: validate.validatePhoneNumber }
      },
      userInfo: {},
      projectList: []
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          let obj = {};
          if (values.times) {
            if (values.times.length > 0) {
              let start = values.times[0]._d;
              let end = values.times[1]._d;
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 23:59:59";
              start = new Date(start);
              end = new Date(end);
              obj.start_time = parseInt(start.getTime() / 1000);
              obj.end_time = parseInt(end.getTime() / 1000);
            }
          }
          obj.mobile = values.mobile;
          obj.project_id = values.project_id;
          if (obj.project_id === 0) {
            delete obj.project_id;
          }
          this.$ajax
            .post(this.$api.getSenior, obj)
            .then(res => {
              if (res.data.length === 0) {
                this.$notification.error({
                  message: res.msg
                });
              } else {
                this.userInfo = res.data[0];
                this.userInfo.name = values.mobile;
                if (this.userInfo.total_money === null) {
                  this.userInfo.total_money = 0;
                }
                this.visible = true;
              }
            })
            .catch(err => {
              this.$notification.error({
                message: err
              });
            });
        }
      });
    },
    handleOk() {
      this.visible = false;
    },
    getProjectList() {
      this.$ajax
        .get(this.$api.getproject)
        .then(res => {
          let all = {
            id: 0,
            project_name: "全部项目"
          };
          res.data.unshift(all);
          this.projectList = res.data;
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    }
  },
  created() {
    this.getProjectList();
  }
};
</script>

<style scoped>
.detailQuery {
  padding: 30px 12px;
}
.show-title {
  display: flex;
  align-items: center;
  font-size: 24px;
  color: #323232;
}
.show-title > p:first-child {
  width: 5px;
  height: 20px;
  background-color: #42a5fe;
  border-radius: 2px;
  margin-right: 12px;
}
.detailQuery-form {
  padding: 130px 0;
}
.searchBtn {
  display: flex;
  justify-content: center;
}
.searchBtn button {
  width: 129px;
  height: 36px;
  background-color: #fbfbfb;
  border: 1px solid #dfe2e7;
  font-size: 18px;
  color: #42a5fe;
}
.resultItem {
  display: flex;
  padding-left: 100px;
  color: #323232;
  font-size: 24px;
  margin-bottom: 36px;
}
.closeBtn {
  display: flex;
  justify-content: center;
}
.closeBtn > p {
  width: 110px;
  height: 46px;
  background-color: #fbfbfb;
  border: 1px solid #dfe2e7;
  text-align: center;
  line-height: 46px;
  font-size: 20px;
  color: #42a5fe;
  cursor: pointer;
}
</style>
